import { useState, useEffect } from "react";
import { DatePicker, message } from "antd";
import moment from 'moment';
import { RightOutlined } from "@ant-design/icons";
import styles from '@/styles/AboutUs.module.scss';
import { onlineService } from '@/components/ToolBar/toolbar';
import { validatePhoneNo } from '@/utils';
// 图片
import gzhImg from "@/public/imgs/gzh.png";
import wxImg from "@/public/imgs/wx.jpg";
// api
import { customTour } from '@/api/common';

const formatDate = 'YYYY-MM-DD';

// Form
function CustomForm (){

    const [mdd, setMdd] = useState("");
    const [date, setDate] = useState("");
    const [name, setName] = useState("");
    const [phone, setPhone] = useState("");

    // 禁用开始时间(开始时间不能大于当前时间)
    const yesterday = moment().add(0, 'days');
    function disabledDate(current) {
        if (current <= yesterday) {
            return true
        }
        if (!yesterday || current > yesterday) {
            return false
        }
        return true
    }

    // 提交form表单
    function onSubmit (){

        if(!(mdd && date && name && phone)){
            message.warn('请完善定制信息');
            return false
        }

        if(!validatePhoneNo(phone)){
            message.warn('请输入正确的联系电话');
            return false
        }
        // 提交数据
        customTour({
            destination: mdd,
            beginDate: date,
            linkman: name,
            linkmanPhone: phone
        }).then(res => {
            const { code } = res;
            if(code == 0){
                message.success('已提交定制需求');
                setTimeout(() => {
                    location.reload();
                }, 800)
            }else{
                message.error(res.message)
            }
        });
    }

    return (
        <div className={styles['form']}>
            <p className={styles['title']}>让我们了解你的想法</p>
            <div className={styles['fm']}>
                <div className={styles['item']}>
                    <span className={[styles['icon']].join(' ')}></span>
                    <input type="text" placeholder-style="color:rgb(233,233,233)" onChange={(e) => setMdd(e.target.value)} placeholder='请输入目的地' />
                </div>
                <div className={styles['item']}>
                    <span className={[styles['icon'], styles['icon-1']].join(' ')}></span>
                    <DatePicker 
                        allowClear={false} 
                        format={formatDate}
                        disabledDate={disabledDate}
                        onChange={val => setDate(val)}
                        placeholder='请输入您的出发日期'
                    />
                </div>
                <div className={styles['item']}>
                    <span className={[styles['icon'], styles['icon-2']].join(' ')}></span>
                    <input type="text" onChange={(e) => setName(e.target.value)} placeholder='请输入您的姓名' />
                </div>
                <div className={styles['item']}>
                    <span className={[styles['icon'], styles['icon-3']].join(' ')}></span>
                    <input type="text" onChange={(e) => setPhone(e.target.value)} placeholder='请输入您的联系方式' />
                </div>
                <div className={styles['item']}>
                    <button className={styles['btn']} onClick={() => onSubmit()} >立即定制</button>
                </div>
            </div>
        </div>
    )
}


export default function CustomTour (){

    return (
        <div className={styles['about-us-custom']}>
            <div className={styles['custom-banner']}>
                <h1>私人定制，解锁旅游更多可能</h1>
                <p className={styles['tips']}>
                    游西藏定制，开启您的个性化旅程 <RightOutlined />
                </p>
                <div className={styles['welcome']}>
                    tibet is waiting for you <p className={styles['txt']}>西藏在等你</p>
                </div>
            </div>
            <div className={styles['custom-content']}>
                <div className={styles['steps']}>
                    <div className={styles['service']}>
                        <h3>我们的服务</h3>
                        <p>私人定制概念旅行，</p>
                        <p>高端的选择，高端的服务。</p>
                    </div>
                    <div className={styles['step']}>
                        <div className={styles['sp']}>
                            <div className={[styles['bg']].join(' ')}></div>
                            <p>填写需求</p>
                        </div>
                        <div className={styles['arrow']}>&gt;</div>
                        <div className={styles['sp']}>
                            <div className={[styles['bg'], styles['bg-2']].join(' ')}></div>
                            <p>沟通方案</p>
                        </div>
                        <div className={styles['arrow']}>&gt;</div>
                        <div className={styles['sp']}>
                            <div className={[styles['bg'], styles['bg-3']].join(' ')}></div>
                            <p>确认付款</p>
                        </div>
                        <div className={styles['arrow']}>&gt;</div>
                        <div className={styles['sp']}>
                            <div className={[styles['bg'], styles['bg-4']].join(' ')}></div>
                            <p>快乐出行</p>
                        </div>
                        <div className={styles['btn']}>
                            <a href="#customForm"></a>
                        </div>
                    </div>
                </div>
                <div className={['max-content', styles['desc']].join(' ')}>
                    <div className={styles['dashed']}></div>
                    <div className={styles['context']}>
                        <h3 className={styles['title']}>西藏旅游股份有限公司</h3>
                        <p className={styles['subtitle']}>官方平台 · 实力护航</p>
                        <p className={styles['qa']}><span>*</span> 看游记查攻略好烦 ？</p>
                        <p className={styles['qa']}><span>*</span> 人生地不熟怕踩坑 ？</p>
                        <p className={styles['qa']}><span>*</span> 拒绝约束不想跟团 ？</p>
                        <div className={styles['go']}>交给定制师吧，这次我们玩点不一样的 !</div>
                    </div>
                    <div className={styles['big-bg']}></div>
                </div>
            </div>
            <div className={styles['custom-form']} id="customForm">
                <div className={['max-content', styles['desc']].join(' ')}>
                    <div className={styles['tips']}>
                        <h3>西藏旅游，私人订制</h3>
                        <p>tibet tour, private customization</p>
                        <div className={styles['tp']}>
                            <h5>省心</h5>
                            <span>专业定制师，一站式服务</span>
                        </div>
                        <div className={styles['tp']}>
                            <h5>不贵</h5>
                            <span>高性价比，花费透明</span>
                        </div>
                        <div className={styles['tp']}>
                            <h5>品质</h5>
                            <span>精雕细琢，钟情纯粹</span>
                        </div>
                    </div>
                    <CustomForm />
                </div>
            </div>
            <div className={styles['custom-service']}>
                <div className={['max-content', styles['service']].join(' ')}>
                    <div className={styles['kefu']}>
                        <h5>咨询客服</h5>
                        <p>还有疑问不清楚？点击下方<span className={styles['icon']}></span></p>
                        <div className={styles['btn']} onClick={() => onlineService()}></div>
                    </div>
                    <div className={styles['tel']}>
                        <h5>定制热线</h5>
                        <p>17302869470</p>
                        <p>在线时间：9:00 - 22:00</p>
                    </div>
                    <div className={styles['ewm']}>
                        <div className={styles['item']}>
                            <h5>加入官方粉丝群</h5>
                            <p>给你自由行的安全感</p>
                            <img src={process.env.basePath + wxImg.src} alt="" />
                        </div>
                        <div className={styles['item']}>
                            <h5>关注微信公众号</h5>
                            <p>获取更多福利和玩法</p>
                            <img src={process.env.basePath + gzhImg.src} alt="" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}